{% load i18n static common %}
<div style="padding: 10px;min-height: 300px;min-width: 450px">
    <form class="layui-form action-form" action method="post" id="{{ model_name }}_{{ action_repr }}">
        {% csrf_token %}
        <div class="layui-form-item field-import_file">
            <label class="layui-form-label" for="id_import_file">{% trans 'data_import_labelFile' %}</label>
            <div class="layui-input-inline ">
                <input type="file" name="import_file" lay-data="{accept: 'file'}" required="" id="id_import_file">
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block layui-form-mid layui-word-aux">{% trans 'data_import_fileHelpTxt' %}</div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">{% trans 'date_import_labelExistingData' %}</label>
            <div class="layui-input-inline">
                <select name="import_type" id="id_import_type" autocomplete="off">
                    <option value="0" selected="">{% trans 'date_import_typeOptionIgnore' %}</option>
                    <option value="1">{% trans 'date_import_typeOptionOverwrite' %}</option>
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">{% trans 'schedule_field_startDate' %}</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="startDate_id" placeholder="yyyy-MM-DD">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">{% trans 'schedule_field_endDate' %}</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="endDate_id" placeholder="yyyy-MM-DD">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"
                   style="width: 150px;text-align: left">{% trans 'data_import_fileTemplateDemo' %}</label>
            <div class="layui-input-inline" style="float: right">
                <a id ="empschedule_a" target="_blank" style="color: #01AAED;"
                   href="att/tempschedule/import_template/"><i
                        class="fa fa-download"></i>{% trans 'data_import_fileTemplateDownload' %}</a>
            </div>
        </div>
        <div class="layui-form-item">
            <table class="layui-hide" id="demo"></table>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block"
                 style="margin-left: 0px;min-height: 24px;">{% trans 'data_import_description' %}</div>
            <div class="layui-input-block" style="margin-left: 20px;">
                <p>{% trans 'temporarySchedule.actions.import.required1' %}</p>
                <p>{% trans 'temporarySchedule.actions.import.required2' %}</p>
                <p>{% trans 'temporarySchedule.actions.import.required3' %}</p>
            </div>
        </div>
    </form>
</div>
<script>
layui.use(['table','form','laydate'], function(){
  var table = layui.table,form = layui.form,laydate = layui.laydate;
  var _start,_end;
  var _url='att/tempschedule/import_template/';
    laydate.render({
    elem: '#startDate_id'
    ,type: 'date'
    ,trigger: 'click'
    ,done: function(value, date){
        _start=value;
        $('#empschedule_a')[0].href = _url+'?start_date='+_start+'&'+'end_date='+_end;
  }
  });


    laydate.render({
    elem: '#endDate_id'
    ,type: 'date'
    ,trigger: 'click'
    ,done: function(value, date){
        _end=value;
        $('#empschedule_a')[0].href = _url+'?start_date='+_start+'&'+'end_date='+_end;
  }
  });

    form.render('select');
    table.render({
        elem: '#demo'
        , cols: [[
            {field: 'no', width: '4%', title: ''}
            , {field: 'emp', width: '20%', title: 'A'}
            , {field: 'date1', width: '20%', title: 'B'}
            , {field: 'date2', width: '20%', title: 'C'}
            , {field: 'date3', width: '20%', title: 'D'}
            , {field: 'date4', width: '30%', title: 'E'}
        ]]
        , data: [{
            "no": "1"
            , "emp": "{% trans 'temporarySchedule.fields.employee' %}"
            , "date1": "2020-01-01"
            , "date2": "2020-01-02"
            , "date3": "2020-01-03"
            , "date4": "2020-01-04"
        }, {
            "no": "2"
            , "emp": "10001"
            , "date1": "interval1"
            , "date2": "interval1"
            , "date3": "interval1"
            , "date4": "interval1"
        }, {
            "no": "3"
            , "emp": "10002"
            , "date1": "interval2"
            , "date2": "interval2"
            , "date3": "interval2"
            , "date4": "interval2"
        }, {
            "no": "4"
            , "emp": "10003"
            , "date1": "interval3"
            , "date2": "interval3"
            , "date3": "interval3"
            , "date4": "interval3"
        }]
    });
});
</script>